
<template>
  <view :class="theme" style="padding:  30rpx 0 var(--window-bottom); margin-bottom: 120rpx;">
    <view @click.stop="checkedItem(index)" v-for="(item, index) in address" :key="index" class="mt-10 p-30 b-rounded-20"
      :class="+item.is_default ? 'bg-primary color-base' : 'bg-section color-base'" style="margin: 0 30rpx 30rpx;">
      <label class="text-28 justify-between">
        <text class="mr-20">收货人：{{ item.name }}</text>
        <text>{{ item.mobile || "-" }}</text>
      </label>
      <label class="mt-20 mb-20 text-28 multi-ellipsis">
        {{ item.area_text }} {{ item.remark }}
      </label>

      <view class="flex-row items-center pt-20" style="border-top: 2rpx solid rgba(151,151,151,0.1);">
        <!-- <view @click="setDefault(index)" class="flex-row items-center" hover-class="op-[0.6]">
          <uv-icon size="40" :color="+item.is_default ? $config.COLOR_WHITE : $config.COLOR_PLACEHOLDER" name="checkmark-circle" />
          <text class="ml-10">默认地址</text>
        </view> -->
        <view class="flex-1 flex-row justify-end">
          <!-- <view @click.stop="uniNavigator({ url: `/pages/client/base/setAddress?id=${item.id}` })" hover-class="op-[0.6]"
            class="flex-row items-center">
            <uv-icon class="ml-30" name="edit-pen" color="'color-inverse'" size="36" />
            <text class="ml-6">编辑</text>
          </view> -->
          <view @click.stop="removeItem(index)" class="flex-row items-center" hover-class="op-[0.6]">
            <uv-icon class="ml-30" name="trash" color="'color-inverse'" size="36" />
            <text class="ml-6">删除</text>
          </view>
        </view>
      </view>
    </view>
    <uv-empty v-if="!address.length" margin-top="200" mode="address" text-color="#9b9b9b" />
    <view style="backdrop-filter: blur(24rpx);"
      class="fixed content-box bottom-0 flex-row h-120 items-center bg-section box-content pb-[var(--window-bottom)] left-[var(--window-left)] right-[var(--window-right)] bg-[rgba(255, 255, 255, 0.9)] z-99">
      <button @click="uniNavigator({ url: '/pages/client/base/setAddress' })" hover-class="op-[0.6]"
        style="margin: 0 60rpx;" class="flex-1 bg-primary b-rounded-50 color-base text-center text-32 fw-bold lh-90">
        添加地址
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import { useStore } from "vuex";

const { $config = {} } = getApp().globalData || {};
const { theme } = useMapState(["theme"]);
const address = ref<any[]>([]);
const store = useStore();

onShow(() => {
  uni.showToast({ icon: "loading" });
  uni.request({
    url: "/addressList",
    success({ data }: any) {
      uni.hideToast();
      address.value = data;
    }
  });
});

let enabledSelectAddress = false;
onLoad(({ enabled_select_address = 0 }: any) => {
  enabledSelectAddress = !!+enabled_select_address;
})

const checkedItem = (index: number) => {
  if (!enabledSelectAddress) return;
  store.commit("setState", { key: "address", value: address.value[index] });
  uni.navigateBack();
}

const removeItem = (index: number) => {
  uni.showModal({
    title: "温馨提示",
    content: "确定要删除该地址吗？",
    success({ confirm }) {
      const { id } = address.value[index]
      confirm && uni.request({
        url: "/delAddress",
        data: { id },
        success() {
          address.value.splice(index, 1);
          store.state.address?.id === id &&
            store.commit("setState", { key: "address", value: {} })
        }
      })
    }
  })
}

const setDefault = (index: number) => {
  const { id, is_default } = address.value[index];
  if (+is_default) return;
  uni.request({
    url: "/setDefaultAddress",
    data: { id },
    success() {
      address.value = address.value.map(item => ({ ...item, is_default: 0 }));
      address.value[index].is_default = 1;
    }
  })
}
</script>

<style lang="scss" scoped></style>